<template>
    <basic-container>
        <el-row style="height: 240px;">
            <el-col :span="7" class="charts-col">
                <!-- 总病案数 -->
                <div ref="qualifyBar" style="width: 100%;height: 210px;"></div>
            </el-col>
            <el-col :span="7" class="charts-col">
                <div ref="qualifyScoreBar" style="width: 100%;height: 210px;"></div>
            </el-col>
            <el-col :span="10" class="charts-col">
                <div style="margin-bottom: 20px;">病案首页重点问题</div>
                <div ref="notkeyChart" style="width: 80%;height: 180px;"></div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24" class="charts-col">
                <div ref="passingChart" style="width: 100%;height: 350px;"></div>
            </el-col>
        </el-row>
    </basic-container>
</template>

<script setup>
const qualifyBar = ref(null);
const qualifyScoreBar = ref(null);
const notkeyChart = ref(null);
const passingChart = ref(null);
const { proxy } = getCurrentInstance();
const qualifyOption = {
    title: {
        text: '圆环图',
        left: 'center',
        top: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            // emphasis: {
            //     label: {
            //         show: true,
            //         fontSize: 16,
            //         fontWeight: 'bold'
            //     }
            // },
            labelLine: {
                show: false
            },
            data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
            ]
        }
    ]
}

const noteKeyOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '2%',
        // right: '2%',
        // top:'0.1%',
        top: '1%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.1]
    },
    yAxis: {
        type: 'category',
        data: ['Brazil', 'Indonesia', 'USA', 'China']
    },
    series: [
        {
            name: '2011',
            type: 'bar',
            data: [18203, 23489, 29034, 131744],
            color: '#00d3b0'
        },
    ]
}


const passingOption = {
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: ['Evaporation', 'Precipitation']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Temperature',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: 'Precipitation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [ 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 ]
    },
  ]
}
onMounted(() => {
    let myBar = proxy.$echarts.init(qualifyBar.value);
    let myBar2 = proxy.$echarts.init(qualifyScoreBar.value);
    //   let myChart2 = proxy.$echarts.init(importantCharts.value);
    //   let myChart3 = proxy.$echarts.init(generalCharts.value);
    let myChart = proxy.$echarts.init(notkeyChart.value);
    let myChart1 = proxy.$echarts.init(passingChart.value);
    myBar.setOption(qualifyOption);
    myBar2.setOption(qualifyOption);
    myChart.setOption(noteKeyOption)
    myChart1.setOption(passingOption)
    //   myChart1.setOption(departOption);
    //   myChart2.setOption(importantOption);
    //   myChart3.setOption(generalOption);
})

// 根据页面大小自动响应图表大小
window.addEventListener("resize", function () {
    myChart.resize();
});

</script>

<style scoped>
.charts-col {
    border: 1px solid #f1f1f1;
}
</style>